<template>
	<uni-popup ref="popup" type="bottom" @change="upChange">
		<view class="ml-10 mr-10 flex-bottom">
			<view class="bgc-white round-15 w100 flex-bottom text-30">
				<view class="tac text-center h-90 text-primary" @tap="onSelect({ name: '男', value: 1 })">男</view>
				<view class="tac text-center h-90 text-primary border-top" @tap="onSelect({ name: '女', value: 2 })">女</view>
			</view>
			
			<view @tap="popup.close" class="w100 text-center h-90 tac text-primary bgc-white round-15 mt-20 text-30">取消</view>
		</view>
	</uni-popup>
</template>

<script setup>
	
	import { ref, nextTick, watch, computed } from "vue"
	
	let props = defineProps({ 
		modelValue: { 
			type: Boolean, 
			default: false
		},
	})
	
	
	let { user } = uni.$store()
	
	let popup = ref(null)
	let emits = defineEmits(['update:modelValue'])
	
	watch(() => props.modelValue, show => {
		show && nextTick(popup.value?.open)
		!show && nextTick(popup.value?.close)
	})
	
	let upChange = ({ show }) => !show && emits('update:modelValue', show)
	
	function onSelect(type) {
		user.userInfo.gender = type
		popup.value?.close()
	}
	
</script>

<style scoped lang="scss">
	.text-white{color: #fff !important}
	.tac{line-height: 90rpx}
</style>